<template>
  <div class="qa-honour">
    <div class="header">问答助人光荣榜</div>
    <div class="content">
      <el-row class="title">
        <el-col :span="16">用户名</el-col>
        <el-col :span="8" class="answer-count">回答数</el-col>
      </el-row>
      <el-row
        v-for="(item, index) in listData"
        :key="index"
      >
        <el-col :span="16">
          <span :style="nameStyle(index)" class="level"></span>
          <span class="username">{{item.name}}</span>
        </el-col>
        <el-col :span="8" class="answer-count">{{item.answerCount}}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QaHonour',
  props: {
    list: {
      type: Array,
      default() {
        return [
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 },
          { name: 'bobage88', answerCount: 42 }
        ];
      }
    }
  },
  computed: {
    listData() {
      return this.list.length > 10 ? this.list.slice(0, 10) : this.list;
    }
  },
  methods: {
    nameStyle(level) {
      return {
        background: 'url(/static/img/qa/order.png) no-repeat',
        backgroundPosition: `0 ${-level * 9}px`
      };
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .qa-honour {
    margin-top: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    .header {
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: red;
      color: #fff;
    }
    .content {
      .el-row {
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        color: #666;
        .username {
          cursor: pointer;
          &:hover {
            color: @mainBgColor;
          }
        }
        .level {
          display: inline-block;
          margin-right: 8px;
          width: 11px;
          height: 9px;
        }
        .answer-count {
          text-align: center;
        }
      }
      .el-row:nth-of-type(odd) {
        background-color: #eee;
      }
      .title {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
      }
    }
  }
</style>
